<template>
  <view>
    <view class="bg-white">
      <view class="rounded-16rpx p-20rpx">
        <view class="input-box">
          <text>涉事人员姓名：</text>
          <u-input v-model="formData.name" placeholder="请输入涉事人员姓名" />
        </view>
        <view class="input-box">
          <text>涉事人员身份证：</text>
          <u-input
            v-model="formData.idCard"
            type="idcard"
            maxlength="18"
            placeholder="请输入涉事人员身份证"
          />
        </view>
        <view class="input-box">
          <text>事故类型</text>
          <picker :range="typeList" @change="changeType">
            <u-input v-model="formData.type" placeholder="请选择事故类型" />
          </picker>
        </view>
        <view class="input-box" @click="showtime = true">
          <text>发生时间</text>
          <u-input
            v-model="formData.time"
            placeholder="请选择事故发生时间"
            readonly
          />
        </view>
        <view class="input-box" style="display: block">
          <text class="my-10rpx">事故描述：</text>
          <u-textarea
            v-model="formData.desc"
            autoHeight
            placeholder="请输入事故描述"
          />
        </view>
      </view>
      <view class="py-20rpx">
        <view class="text-26rpx mx-20rpx text-third mb-20rpx">历史数据</view>
        <view v-if="list.length">
          <view
            v-for="i in list"
            :key="i._id"
            style="transition: 300ms"
            :class="
              (expandIds.includes(i._id) ? 'h-680rpx' : 'h-78rpx') +
              ' p-20rpx overflow-hidden mb-20rpx bg-white rounded-10rpx'
            "
          >
            <view
              class="flex justify-between items-center"
              @click="handleExpand(i._id)"
            >
              <text class="text-first text-base">{{ i.name }}</text>
              <view class="text-first text-base flex items-center">
                {{ i.createTime }}
                <u-icon
                  :name="expandIds.includes(i._id) ? 'arrow-up' : 'arrow-down'"
                  color="#666"
                  size="12"
                ></u-icon>
              </view>
            </view>
            <view class="text-first text-base py-10rpx">
              <view>
                <text>涉事人姓名：</text>
                {{ i.name }}
              </view>
            </view>
            <view class="text-first text-base py-10rpx">
              <text>涉事人员身份证：</text>
              {{ i.idCard }}
            </view>
            <view class="text-first text-base py-10rpx">
              <text>事故类型：</text>
              {{ i.type }}
            </view>
            <view class="text-first text-base py-10rpx">
              <text>发生时间：</text>
              {{ i.time }}
            </view>
            <view class="text-first text-base py-10rpx">
              <view>事故描述：</view>
              <view class="max-h-200rpx overflow-auto">
                {{ i.desc }}
              </view>
            </view>
            <view class="flex justify-end mt-20rpx">
              <view @click.stop="handle2Del(i)">
                <u-button type="error" size="small" text="删除" />
              </view>
            </view>
          </view>
        </view>
        <u-empty
          v-else
          margin-top="36%"
          icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
          text="暂无数据"
        />
      </view>
      <view class="h-200rpx"></view>

      <view class="fixed w-full bottom-0rpx pb-80rpx bg-white px-20rpx">
        <u-button
          color="#386ee8"
          :custom-style="{ borderRadius: '20rpx' }"
          :throttle-time="600"
          text="上传"
          :disabled="btn_disabled"
          :loading="btnLoading"
          @click="handleClickSubmit"
        />
      </view>
    </view>
    <u-datetime-picker
      mode="datetime"
      :show="showtime"
      :max-date="currentTime"
      @confirm="handleConfirmChooseDateRange"
    ></u-datetime-picker>
  </view>
</template>

<script lang="ts">
import dayjs from 'dayjs'
import { findIndex } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import { showModal } from '@/utils'

import { getIntelligenceApi, postIntelligenceApi } from './service'
@Component({ name: 'IntelligenceReport' })
export default class IntelligenceReport extends Vue {
  btnLoading = false
  showtime = false
  currentTime = dayjs().valueOf()

  handleConfirmChooseDateRange({ value }: Recordable) {
    this.formData.time = dayjs(value).format('YYYY-MM-DD HH:mm')
    this.showtime = false
  }
  formData = {
    name: '',
    idCard: '',
    type: '',
    time: '',
    desc: ''
  }

  onLoad() {
    this.getData()
  }
  list: Recordable = {}
  async getData() {
    const { data } = await getIntelligenceApi()
    this.list = data
  }
  get btn_disabled() {
    const { name, idCard, type, desc } = this.formData
    return !name || !idCard || !type || !desc
  }
  readonly typeList = [
    '物体打击',
    '车辆伤害',
    '机械伤害',
    '触电',
    '淹溺',
    '灼烫',
    '火灾'
  ]

  changeType({ detail }: any) {
    this.formData.type = this.typeList[+detail.value]
  }
  async handleClickSubmit() {
    this.btnLoading = true
    try {
      await postIntelligenceApi({
        ...this.formData,
        createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      await showModal({
        content: '上传成功'
      })
      this.getData()
    } finally {
      this.btnLoading = false
    }
  }
  expandIds: Array<any> = []
  handleExpand(id: string) {
    const index = findIndex(this.expandIds, (i) => i === id)
    if (index >= 0) {
      this.expandIds.splice(+index, 1)
      return
    }
    this.expandIds.push(id)
  }
  async handle2Del({ _id }: any) {
    const db: any = wx.cloud.database()
    const { confirm } = await showModal({ content: '确定删除吗？' })
    confirm && (await db.collection('intelligence').where({ _id }).remove())
    this.getData()
  }
  async handle2Publish(i: any) {
    console.log('i', i)
  }
}
</script>

<style scoped lang="scss">
.input-box {
  @apply pb-16rpx;
  border-bottom: 2rpx solid #f6f6f6;
  align-items: center;
  color: #333;
  font-size: 28rpx;
}
</style>
